<template>
	<view class="container" :style="{ backgroundImage: 'url(' + $setting.imgUrl() + '/static/inviting/bg.png)' }">
		<view class="top_box">
			{{conptotal}}<text style="font-size: 60rpx;">元</text>
			<image class="coupon" :src="$setting.imgUrl() + '/static/inviting/coupon.png'" mode="heightFix" @click="showNewCustom=true"></image>
			<image class="coupon_details" :src="$setting.imgUrl() + '/static/inviting/coupon_details.png'" mode="heightFix" @click="showNewCustom=true">
			</image>
		</view>
		<view class="notice" v-if="fgcoupon==1">
			<swiper circular vertical :indicator-dots="false" :autoplay="true" style="height: 50rpx;">
				<swiper-item v-for="(item, index) in noticeList" :key="index">
					<!-- <view>{{ maskString(item.name) }}获得{{ item.value }}元</view> -->
					<view> **** 获得{{ item.value }}元</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="bottom_box">
			<!-- <image class="strategy" :src="$setting.imgUrl() + '/static/inviting/strategy.png'"
				mode="heightFix"></image> -->
			<button class="u-reset-button" open-type="share">
				<image class="invite" :src="$setting.imgUrl() + '/static/inviting/invite.png'" mode="heightFix"></image>
			</button>
			<view class="post_box">
				<image @click.stop="showmask = true" class="poster"
					:src="$setting.imgUrl() + '/static/inviting/invite_code.png'" mode="heightFix"></image>
				<view>|</view>
				<image class="poster" :src="$setting.imgUrl() + '/static/inviting/poster.png'" mode="heightFix"
					@click="jump('/pages/mine/publicize/publicize_qrcode')"></image>
			</view>
			<view class="list_box">
				<view class="obtain_top" @click="jump('/pages/mine/coupon/coupon')">
					<image class="obtain" :src="$setting.imgUrl() + '/static/inviting/red_envelope.png'" mode="heightFix">
					</image>
					<view class="obtain_txt">你已获得补贴<text style="font-size: 52rpx;">{{ total }}</text>元</view>
					<image class="obtain" style="height: 40rpx;" :src="$setting.imgUrl() + '/static/inviting/red_arrow.png'"
						mode="heightFix"></image>
				</view>
				<view class="title_bar">
					<view>
						已邀请
					</view>
					<view class="bor_left">
						酒友状态
					</view>
					<view class="bor_left">
						发放进度
					</view>
				</view>
				<view class="friend_list">
					<scroll-view style="height: 300rpx;" scroll-y="true" class="scroll-Y" @scrolltolower="lower">
						<view class="friend_item" v-for="(item, index) in friendList" :key="index">
							<view>{{ item.nickName }}</view>
							<view>{{ item.order_num > 0 ? '已下单' : '未下单' }}</view>
							<view>{{ item.upci > 0 ? '已发放' : '未发放' }}</view>
						</view>
						<view v-if="friendList.length > 0">
							<b-u-loadmore :status="loadmoreStatus"></b-u-loadmore>
						</view>
						<view class="empty_box" v-else>
							<image class="empty" :src="$setting.imgUrl() + '/static/inviting/empty.png'" mode="heightFix">
							</image>
							快去邀请好友赚取奖励金 ~
						</view>
					</scroll-view>
				</view>
			</view>

		</view>
		<view class="service_box">
			<view class="service" @click="gojump()">
				<image class="service_img" :src="$setting.imgUrl() + '/static/golden_user.png'" mode="heightFix"></image>
				<text class="service_txt">金牌推广员</text>
			</view>
			<view class="service_btn">
				<button class="u-reset-button" @click="$store.dispatch('getCustomer')">联系客服</button>
			</view>
		</view>
		
		<view class="maskshow" v-show="showmask" @click.stop="showmask = false">
			<image class="userqrcode" :src="userQrcode" mode="widthFix" @longtap.stop="showtap"></image>
		</view>
		<view class="strategy_pop" v-if="guide === true">
			<view class="strategy_box">
				<view class="strategy_top">邀请赚钱攻略</view>
				<view class="strategy_text">
					邀请赚钱攻略邀请赚钱攻略邀请赚钱攻略
				</view>
			</view>
			<view @click.stop="guide = false" class="close_pop">
				<image class="close_img" :src="$setting.imgUrl() + '/static/inviting/close.png'" mode=""></image>
			</view>
		</view>
		
		<ShowPeopleCustom @noShow="showNewCustom=false" :couponLists="conplist" :showNewCustom="showNewCustom"></ShowPeopleCustom>
	</view>
</template>

<script>
export default {
	data() {
		return {
			noticeList: [],//播报列表
			friendList: [],//已邀请用户列表
			pageForm: {
				page: 1,
				list_rows: 15,
			},
			loadmoreStatus: 'nomore',//数据加载状态
			showmask: false,
			guide: false,
			userQrcode: "",
			total: 0,
			userInfo:{},
			conptotal:'-',
			conplist:[],
			showNewCustom:false,
			settings:{
				share_title:'',
				share_img:''
			},
			fgcoupon:0,
		}
	},
	onLoad() {
		this.getHttp();
		this.getAgentQrcode();
		this.getPrizeList();
	},
	onShow() {
		
	},
	onShareAppMessage() {
		return {
			path: "pages/index/index"
		}
	},
	onShareAppMessage() {
		return {
			title: this.settings.share_title??'购酒秒送达，无需再等待',
			imageUrl: this.settings.share_img??'',
			path: "pages/index/index?scene=uid:"+this.userInfo.user_id
		}
	},
	methods: {
		getHttp() {
			this.pageForm.page = 1;
			this.friendList = [];
			this.getUserInfo();
			this.getUserInviteList();
			this.getInviteConList();
		},
		getUserInfo() {
			uni.$u.api.userInfo().then(res => {
				this.userInfo = res.userInfo;
			})
		},
		getUserInviteList() {
			// nickName 用户名,order_num>0 已下单 未下单 ,upci>0 已发放 未发放
			this.loadmoreStatus = 'loading';
			uni.$u.api.getUserInviteList(this.pageForm).then(res => {
				this.total = res.total || 0
				this.friendList = this.friendList.concat(res.list.data);
				this.loadmoreStatus = 'loadmore';
				if (this.friendList.length == res.list.total) {
					this.loadmoreStatus = 'nomore';
				}
			})
		},
		getInviteConList() {
			uni.$u.api.getInviteConList({}).then(res => {
				console.log(res,'getInviteConList')
				this.conptotal = res.conptotal
				this.conplist = res.conplist
				this.fgcoupon = res.fgcoupon
				this.settings = res.settings
			})
		},
		getPrizeList() {
			uni.$u.api.getPrizeList().then(res => {
				console.log(res, '========');
				this.noticeList = res.list
			})
		},
		getAgentQrcode() {
			uni.$u.api.getAgentQrcode({ source: 'wx' }).then(res => {
				this.userQrcode = res.user_qrcode;
			})
		},
		lower() {
			if (this.loadmoreStatus == 'nomore') {
				return;
			}
			this.pageForm.page++;
			this.getOrder();
		},
		maskString(str) {
			if (str.length <= 3) {
				return str;
			}
			return str[0] + '*'.repeat(str.length - 3) + str.slice(-2);
		},
		gojump() {
			if(this.userInfo.is_golden==1){
				this.jump('/pages/mine/promotion/promotion');
			}else{
				this.jump('/pages/mine/publicize/publicize_form');
			}
		},
		jump(url) {
			uni.navigateTo({
				url: url
			})
		},
	},
}
</script>

<style lang="scss" scoped>
.container {
	height: 1970rpx;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	position: relative;

	.top_box {
		position: absolute;
		top: 24%;
		left: 0;
		width: 100%;
		color: #f42003;
		font-size: 110rpx;
		font-weight: bold;
		text-align: center;
		line-height: 80rpx;

		image {
			margin: auto;
			display: block;
		}

		.coupon {
			height: 42rpx;
		}

		.coupon_details {
			height: 16rpx;
			margin-top: 16rpx;
		}
	}

	.notice {
		position: absolute;
		top: 44%;
		left: 0;
		width: 100%;
		color: #fdbdb6;
		text-align: center;
		font-size: 30rpx;

	}

	.bottom_box {
		position: absolute;
		top: 58%;
		left: 0;
		width: 100%;

		image {
			margin: auto;
			display: block;
		}

		.strategy {
			height: 26rpx;
		}

		.invite {
			height: 80rpx;
			margin: 26rpx auto;
		}

		.post_box {
			margin: auto;
			width: 500rpx;
			display: flex;
			color: #fde9a9;

			.poster {
				height: 30rpx;
			}
		}

		.list_box {
			width: 86%;
			height: 500rpx;
			margin: 24rpx auto;
			border-radius: 30rpx;
			background: #ffffff;

			.obtain_top {
				min-height: 80rpx;
				width: 76%;
				display: flex;
				align-items: center;
				justify-content: center;
				background: linear-gradient(to bottom, #fbfcca, #ffcc5e);
				border-radius: 0 0 30rpx 30rpx;
				color: #ab2526;
				margin: auto;
				padding: 0 10rpx;

				.obtain {
					height: 70rpx;
					display: block;
				}

				.obtain_txt {
					flex: 1;
					text-align: center;
				}

			}

			.title_bar {
				display: flex;
				color: #666;
				margin: 24rpx 0;

				view {
					width: 33%;
					text-align: center;
				}

				.bor_left {
					border-left: 1px solid #e9e9e9;
				}
			}

			.friend_list {
				overflow: hidden;
				max-height: 300rpx;
				width: 90%;
				margin: auto;

				.friend_item {
					margin: 10rpx 20rpx;
					padding: 10rpx 15rpx;
					font-size: 24rpx;
					display: flex;
					justify-content: space-between;
					border-bottom: 1px solid #cecece;

				}

			}

			.empty_box {
				text-align: center;
				color: #999;
				font-size: 20rpx;

				.empty {
					height: 200rpx;
					margin: 36rpx auto;
				}
			}
		}
	}

	.service_box {
		position: absolute;
		top: 95%;
		left: 0;
		width: 100%;
		text-align: center;
		color: #ffd066;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		padding:10rpx 20rpx;
		.service {
			text-align: left;
			padding-left: 40rpx;
			flex-basis: 60%;
			display: flex;
			align-items: center;
		}
		.service_txt{
			line-height: 48rpx;
		}
		.service_img{
			height: 100%;
			margin-right: 20rpx;
		}
		.service_btn{
			text-align: right;
			flex-grow: 1;
		}
	}

	.maskshow {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.7);
		z-index: 2;
	}

	.userqrcode {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 70%;
		z-index: 3;
		border-radius: 20rpx;
	}

	.strategy_pop {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.7);
		z-index: 2;

		.strategy_box {
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 80%;
			height: 50vh;
			z-index: 3;
			border-radius: 20rpx;
			background-color: white;

			.strategy_top {
				font-size: 32rpx;
				margin-top: 30rpx;
				text-align: center;
			}

			.strategy_text {
				max-height: 80%;
				margin: 30rpx;
				line-height: 40rpx;
				// letter-spacing: 2rpx;
				overflow: hidden;
				overflow-y: scroll;
			}
		}

		.close_pop {
			position: fixed;
			top: 80%;
			left: 50%;
			z-index: 3;
			transform: translate(-50%, -50%);
			color: #fff;

			.close_img {
				border: 2px solid #fff;
				border-radius: 50%;
				height: 44rpx;
				width: 44rpx;
			}
		}
	}
}
</style>
